<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import api from "@/api/api.js"
import { useRouter } from "vue-router";

const router = useRouter()
const swiper_list = ref([])
const props = defineProps({
  swiper_list: Array
})

// 触摸相关变量
const touchStartX = ref(0)
const touchEndX = ref(0)

// 自动播放
const autoplay = ref(true)
const autoplayTimeout = ref(3000)
let autoplayTimer = null

// 计算每个项目的样式
const getItemStyle = (index) => {
  const offset = index - currentIndex.value

  if (offset === 0) {
    return {
      transform: 'scale(1) translateX(0)',
      zIndex: 10,
      transition: 'all 0.5s linear'
    }
  }
  // 左侧第一张
  else if (offset === -1) {
    return {
      transform: 'scale(0.8) translateX(-60px)',
      zIndex: 9,
      transition: 'all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)'
    }
  }
  // 左侧第二张
  else if (offset === -2) {
    return {
      transform: 'scale(0.6) translateX(-135px)',
      zIndex: 8,
      transition: 'all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)'
    }
  }
  // 右侧第一张
  else if (offset === 1) {
    return {
      transform: 'scale(0.8) translateX(60px)',
      zIndex: 9,
      transition: 'all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)'
    }
  }
  // 右侧第二张
  else if (offset === 2) {
    return {
      transform: 'scale(0.6) translateX(135px)',
      zIndex: 8,
      transition: 'all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)'
    }
  }
  // 其他项隐藏
  else {
    return {
      transform: 'scale(0.4) translateX(0)',
      zIndex: 0,
      opacity: 0,
      transition: 'all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1)'
    }
  }
}


// 下一张
const nextSlide = () => {
  const oldIndex = currentIndex.value
  currentIndex.value = (currentIndex.value + 1) % swiper_list.value.length

}

// 上一张
const prevSlide = () => {
  const oldIndex = currentIndex.value
  currentIndex.value = (currentIndex.value - 1 + swiper_list.value.length) % swiper_list.value.length

}


// 触摸开始事件
const handleTouchStart = (event) => {
  touchStartX.value = event.touches[0].clientX
}

// 触摸结束事件
const handleTouchEnd = (event) => {
  touchEndX.value = event.changedTouches[0].clientX
  handleSwipeGesture()
}

// 处理滑动手势
const handleSwipeGesture = () => {
  const swipeThreshold = 30 // 减小阈值以适应移动端
  const diff = touchStartX.value - touchEndX.value

  if (Math.abs(diff) > swipeThreshold) {
    if (diff > 0) {
      // 向左滑动，显示下一张
      nextSlide()
    } else {
      // 向右滑动，显示上一张
      prevSlide()
    }
  }
}

// 开始自动播放
const startAutoplay = () => {
  if (!autoplay.value) return

  stopAutoplay() // 先清除已存在的定时器
  autoplayTimer = setInterval(() => {
    nextSlide()
  }, autoplayTimeout.value)
}

// 停止自动播放
const stopAutoplay = () => {
  if (autoplayTimer) {
    clearInterval(autoplayTimer)
    autoplayTimer = null
  }
}

//前往对应的活动
const currentIndex = ref(0)// 当前激活的索引
// 使用 computed 计算当前链接
const currentLink = computed(() => {
  if (swiper_list.value.length > 0 && swiper_list.value[currentIndex.value]) {
    return swiper_list.value[currentIndex.value].link
  }
  return null // 或者返回默认值
})
//点击轮播图前往
const goToSlide = (link) => {
  router.push({
    path: '/detail',
    query: {
      id: link
    }
  })
}

const lookDetail = () => {
  router.push({
    path: '/detail',
    query: {
      id: currentLink.value
    }
  })
}
// 初始化自动播放
onMounted(() => {
  swiper_list.value = props.swiper_list
  startAutoplay()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  stopAutoplay()
})
</script>
<template>
  <div>
    <h2 style="font-size: 16px">热门活动</h2>
    <div style="width: 100%" class="swiper-box">
      <div class="stack-swiper-container" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <div class="stack-swiper">
          <div v-for="(item, index) in swiper_list" :key="item.id" class="stack-swiper-item" :style="getItemStyle(index)"
            @click="goToSlide(item.link)">
            <img class="item-content" :src="item.cover" alt="">
          </div>
        </div>
      </div>

      <footer>
        <div @click="lookDetail">查看详情</div>
      </footer>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import url('@/styles/components/home/swiper');
</style>

